<template>
    <div id="templateView">
        <div class="templateContent">
            <el-input v-model="template.templateName" placeholder="模板名称" style="margin-bottom: 10px;"></el-input>
            <quill-editor style="height:600px" v-model="template.templateContent" ref="myQuillEditor">
            </quill-editor>
            <el-button style="margin:80px 20px" @click="save">保存且返回</el-button>
        </div>
        <el-table :data="wildcard" class="table">
          <el-table-column label="中文通配符" prop="lable"></el-table-column>
          <el-table-column label="内容" prop="value"></el-table-column>
        </el-table>
        
    </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
    name:"templateView",
    props:['template'],
    components: {
      quillEditor
    },
    data(){
        return{
            _parent:{},
            wildcard:[
                {lable:"【产品】", value:"合同的产品"},
                {lable:"【总金额】", value:"合同签订的金额"},
                {lable:"【客户】", value:"买家及乙方"},
                {lable:"【我方】", value:"我方公司名称"},
                {lable:"【负责人】", value:"负责跟进合同的员工"},
                {lable:"【签约时间】", value:"签约时间"},
                {lable:"【合同开始时间】", value:"合同开始时间"},
                {lable:"【合同结束时间】", value:"合同结束时间"},
            ]
        }
    },
    methods:{
        save(){
            this.axios.post("api/dd/printTemplate",this.template)
            .then(res => {
                this.global.mes_success("保存成功")
                window.console.log(this._parent)
                this._parent.templateEditDialogVisible = false
                this._parent.initData()
            })
            .catch(err => {
                this.global.mes_error("保存失败")
            })
        }
    },
    created(){
    }
}
</script>

<style scoped>
.templateContent{width: 650px;display:inline-block;min-height: 700px;}
.table{float:right;width:35%}
</style>